import { getTenementListService, TenementDataType } from '@/services/api/tenement';
import { useRequest } from 'ahooks';
import { Button, Card, Input, Popconfirm, Space, Table, TableProps, Tag } from 'antd';
import React, { ChangeEvent, useEffect, useState } from 'react';

const Tenement: React.FC = (props) => {

  const [search, setSearch] = useState({name: '', person: ''});

  function handleInputChange(event: ChangeEvent<HTMLInputElement>): void {
    const name = event.target.name;
    const value = event.target.value;
    setSearch({
      ...search, 
      [name]: value,
    });
  }

  const {run, data, loading} = useRequest(getTenementListService, {
    manual: true,
  })

  useEffect(() => {
    run(search);
  }, [])
  
  const columns: TableProps<TenementDataType>["columns"] = [
    {
      title: 'No.',
      key: 'index',
      render(value, record, index) {
        return index + 1;
      },
    },
    {
      title: '楼宇名称',
      key: 'name',
      dataIndex: 'name',
    },
    {
      title: '负责人',
      key: 'person',
      dataIndex: 'person',
    },
    {
      title: '负责人电话',
      key: 'tel',
      dataIndex: 'tel',
    },
    {
      title: '使用状态',
      key: 'status',
      dataIndex: 'status',
      render(value, record, index) {
        if (value === '1') return <Tag color="green">使用中</Tag>;
        if (value === '2') return <Tag color="#f50">建设中</Tag>;
        if (value === '3') return <Tag color="red">已竣工</Tag>;
      },
    },
    {
      title: '空置率',
      key: 'vacancyRate',
      dataIndex: 'vacancyRate',
      render(value, record, index) {
        return value;
      },
    },
    {
      title: '物业费率',
      key: 'propertyFee',
      dataIndex: 'propertyFee',
      render(value, record, index) {
        return value;
      },
    },
    {
      title: "操作",
      key: "operate",
      render(value, record, index) {
        return (
          <>
            <Button size="small" type="link" onClick={() => {}}>
              编辑
            </Button>
            <Popconfirm
              title="删除数据"
              description="确认删除该条数据？"
              okText="确认"
              cancelText="取消"
              onConfirm={() => {}}
            >
              <Button size="small" type="link" danger>
                删除
              </Button>
            </Popconfirm>
          </>
        );
      },
    },
  ]

  

  return (
    <Space className="fx" direction='vertical' size='large'>
      <Card>
        <div style={{display: 'flex', alignItems: 'center', gap: '16px'}}>
          <Space>楼宇名称：<Input name='name' value={search.name} onChange={handleInputChange}/></Space>
          <Space>负责人：<Input name='person' value={search.person} onChange={handleInputChange}/></Space>
          <Space>
            <Button type='primary'>查询</Button>
            <Button>重置</Button>
          </Space>
        </div>
      </Card>
      <Card>
        <Table
          columns={columns}
          dataSource={data}
          loading={loading}
          rowKey={(record) => record.id}
        />
      </Card>
    </Space>
  );
};

export default Tenement;